<template>
  <div class="pagination-block">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 30]"
      :size="size" :disabled="disabled" :background="background" layout="jumper, total, sizes, prev, pager,next "
      :total="totalNum" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      <template #total="{ total }">
        共 <span style="color: #ff6600">{{ total }}</span> 条记录
      </template>
    </el-pagination>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import type { ComponentSize } from 'element-plus'

const currentPage = ref(1)
const pageSize = ref(10)
const totalNum = ref(0)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const emit = defineEmits<{
  changePage: [pageSize: number, currentPage: number]
}>()
const handleSizeChange = (val: number) => {
  emit('changePage', currentPage.value, val)
}
const handleCurrentChange = (val: number) => {
  emit('changePage', val, pageSize.value,)

}

const open = (pageNo?: number, size?: number, total?: number) => {
  currentPage.value = pageNo ? pageNo : 1
  pageSize.value = size ? size : 10
  totalNum.value = total ? total : 0
}
defineExpose({
  open
})
</script>

<style scoped>
.pagination-block {
  margin: 20px;
  display: flex;
  justify-content: right;
}
</style>
